<template>
  <div class="resiters">
    <div class="resiter-c" style="height:820px">
      <div class="resiter-h">
        注册信息表
      </div>
      <div class="resiter-b">
    <el-form :model="registerInfoDtoForm" :rules="rules" ref="registerInfoDtoForm" label-width="136px">
      <el-form-item label="企业全称" prop="vendorName">
        <el-input v-model="registerInfoDtoForm.vendorName" placeholder="必须为营业执照中名称"></el-input>
      </el-form-item>
      <el-form-item label="企业性质" prop="companyType">
        <el-select v-model="registerInfoDtoForm.companyType" placeholder="请选择" @change="companyTypeChange">
          <el-option v-for="item in companyTypeOptions" :key="item.id" :label="item.remarks" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="品类" prop="supplyCategoryName">
        <select-tree :multiple="false" ref="selectTree" v-model="registerInfoDtoForm.supplyCategoryName"></select-tree>
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="socialCode" v-if="socialCodeShow">
        <el-input v-model="registerInfoDtoForm.socialCode"  placeholder="18位数字和大写字母"></el-input>
      </el-form-item>
      <el-form-item label="企业代码" prop="companyCode" v-if="companyCodeShow">
        <el-input v-model="registerInfoDtoForm.companyCode"  placeholder="数字和大写字母"></el-input>
      </el-form-item>
      <el-form-item label="邀请码" prop="inviteCode" v-if="inviteCodeShow">
        <el-input v-model="registerInfoDtoForm.inviteCode" disabled="disabled"  placeholder="6位数字"></el-input>
      </el-form-item>
      <el-form-item label="联系人姓名" prop="registerUserName">
        <el-input v-model="registerInfoDtoForm.registerUserName"  placeholder="联系人姓名"></el-input>
      </el-form-item>
      <el-form-item prop="registerMailAddress" label="邮箱" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur'] }]">
        <el-input v-model="registerInfoDtoForm.registerMailAddress" placeholder="邮箱将用来登录（邮件将作为用户名）"></el-input>
      </el-form-item>
      <el-form-item label="移动电话号码" prop="cellPhoneNumber">
        <el-input v-model="registerInfoDtoForm.cellPhoneNumber"  placeholder="移动电话号码"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password1">
        <el-input type="password" v-model="registerInfoDtoForm.password1" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="password2">
        <el-input type="password" v-model="registerInfoDtoForm.password2" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="推荐人信息" prop="recommenderInfo">
        <el-input v-model="registerInfoDtoForm.recommenderInfo"  placeholder="推荐人信息"></el-input>
      </el-form-item>
      <el-input v-model="registerInfoDtoForm.supplyCategoryCode" type="hidden"></el-input>
      <!-- <el-form-item label="验证码" prop="verificationCode">
        <el-input v-model="registerInfoDtoForm.verificationCode"></el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button type="success" icon="el-icon-success" @click="submitForm('registerInfoDtoForm')">提交</el-button>
        <el-button type="info" icon="el-icon-refresh" @click="resetForm('registerInfoDtoForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
    </div>
    <el-dialog
      title="注册提示"
      :visible.sync="dialogVisible"
      width="30%">
      <span>{{emailInfo}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="jump">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import SelectTree from '@/components/common/select-ext/select-tree';
  export default {
    components: {
      SelectTree
    },    
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if(value.length > 16 || value.length < 7){
          callback(new Error('密码必须由7-16个英文字母和数字的字符串组成'));
          }else if(!/^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/g.test(value)){
            callback(new Error('密码必须由7-16个英文字母和数字的字符串组成'));
          }
          if (this.registerInfoDtoForm.password2 !== '') {
            this.$refs.registerInfoDtoForm.validateField('password2');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.registerInfoDtoForm.password1) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validateCompanyCode= (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入企业代码'));
        } else {
          if (!/^[A-Z0-9_]+$/.test(value)) {
            callback(new Error('请输入正确的企业代码'));
          }
          callback();
        }
      };
      var validateTaxCode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入统一社会信用代码'));
        } else {
          if (value.length != 18) {
            callback(new Error('长度必须为18位'));
          }
          if (!/^[A-Z0-9_]+$/.test(value)) {
            callback(new Error('请输入正确统一社会信用代码'));
          }
          callback();
        }
      };
      var validateMobilePhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号码'));
        } else {
          if (value.length != 11) {
            callback(new Error('请输入正确的手机号码'));
          }else if (!/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)) {
            callback(new Error('请输入正确的手机号码'));
          }
          callback();
        }
      };
      return {
        socialCodeShow : true,
        companyCodeShow : false,
        inviteCodeShow : false,
        emailInfo:'',
        dialogVisible: false,
        companyTypeOptions:[],
        registerInfoDtoForm: {
          vendorName : '',
          companyType : '',
          supplyCategoryCode : '',
          supplyCategoryName : '',
          socialCode : '',
          companyCode : '',
          inviteCode : '',
          registerUserName : '',
          recommenderInfo : '',
          registerMailAddress : '',
          cellPhoneNumber : '',
          password1 : '',
          password2 : ''
          // verificationCode: ''
        },
        rules: {
          vendorName: [{
              required: true,
              message: '请输入企业全称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 200,
              message: '长度在 1 到 200 个字符',
              trigger: 'blur'
            }
          ],
          companyType : [{
            required: true,
            message: '请选择企业性质',
            trigger: 'change'
          }],
          supplyCategoryName : [{
            required: true,
            message: '请选择品类',
            trigger: 'change'
          }],
          socialCode: [
            { validator: validateTaxCode, trigger: 'blur',required: true}
          ],
          companyCode: [
            { validator: validateCompanyCode, trigger: 'blur',required: true}
          ],
          inviteCode: [
            {
              min: 6,
              max: 6,
              message: '长度必须为6位数字',
              trigger: 'blur'
            }
          ],
          registerUserName: [{
              required: true,
              message: '请输入联系人姓名',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 18,
              message: '长度在 1 到 18 个字符',
              trigger: 'blur'
            }
          ],
          cellPhoneNumber: [
            { validator: validateMobilePhone, trigger: 'blur',required: true }
        ],
      password1: [
            { validator: validatePass, trigger: 'blur',required: true, }
          ],
      password2: [
        { validator: validatePass2, trigger: 'blur',required: true, }
                  ]
      // verificationCode: [{
      //     required: true,
      //     message: '请输入验证码',
      //     trigger: 'blur'
      //   },
      //   {
      //     min: 1,
      //     max: 200,
      //     message: '长度在 1 到 200 个字符',
      //     trigger: 'blur'
      //   }
      // ]
     }    
      };
    },
    mounted(){
      if(this.$route.params.id != undefined){
        this.inviteCodeShow = true;
        this.getInvite();
      }
      this.initData();
    },
    methods: {
      companyTypeChange:function(){
        if(this.registerInfoDtoForm.companyType == 'ORG_TYPE_100302'){  
            this.socialCodeShow = false;
            this.companyCodeShow = true;
        }else{  
           this.socialCodeShow = true;
           this.companyCodeShow = false;
        }  
            },
      initData(){
        this.getDicData('ORG_TYPE').then((data)=>{
          this.companyTypeOptions = data;
        });
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.$route.params.id != undefined){
              if(this.$refs['selectTree'].getResultData().categoryCode != '' && this.$refs['selectTree'].getResultData().categoryCode != undefined){
                this.registerInfoDtoForm.supplyCategoryCode =this.$refs['selectTree'].getResultData().categoryCode;
              }
            }else{
              this.registerInfoDtoForm.supplyCategoryCode =this.$refs['selectTree'].getResultData().categoryCode;
            }
            if(this.registerInfoDtoForm.companyType == 'ORG_TYPE_100302'){
              this.registerInfoDtoForm.socialCode =this.registerInfoDtoForm.companyCode;
            }
            this.axios.post(this.lib.config.host.vendorReg + '/newAccount/register', this.registerInfoDtoForm)
            .then((response)=> {
              if(response.data.success==false){
                this.$message(response.data.message);
              }else{
                this.emailInfo='账号已注册成功，请至你的邮箱（'+ this.registerInfoDtoForm.registerMailAddress +'）激活账号，并在2周之内完成调查表填写。否则自视为放弃注册！'
                this.dialogVisible=true;
              }                  
                    })
              .catch((error) =>{
                alert(error);
                    });
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      jump(){
        this.$router.push('/login');
      },
      getInvite() {
        this.axios.post(this.lib.config.host.vendorMgt + "/vendormgt/invite/getById/" + this.$route.params.id,{}).then((response) => {
          debugger
          this.registerInfoDtoForm.vendorName = response.data.vendorName;
          this.registerInfoDtoForm.supplyCategoryCode = response.data.offeringCode;
          this.registerInfoDtoForm.supplyCategoryName = response.data.offeringName;
          this.registerInfoDtoForm.inviteCode = response.data.invitationCode;
          this.registerInfoDtoForm.registerMailAddress = response.data.email;
          this.registerInfoDtoForm.cellPhoneNumber = response.data.mobilePhone;
          this.registerInfoDtoForm.registerUserName = response.data.linkman;
          })
          .catch(function (error) {
            console.log(error);
            alert(error);
          });

      }
    }
  }

</script>
